<template>
  <div id="__root__layer__">
    <div id="home" @click="reactivePage = 'home'">首页</div>
    <div id="placeholder1">占位1</div>
    <div id="placeholder2">占位2</div>
    <div id="mine" @click="reactivePage = 'mine'">我的</div>
  </div>
</template>

<script>
import { defineComponent, ref, watch } from "vue";

export default defineComponent({
  setup(props, context) {
    const reactivePage = ref("home");

    watch(reactivePage, (newValue, oldValue) => {
      context.emit("reactivePage", newValue);
    });

    return {
      reactivePage,
    };
  },
});
</script>

<style scoped>
#__root__layer__ {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 49px;
  font-size: 14px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-top: 1px solid #eee;
  box-shadow: 0 -1px 5px 5px rgba(0, 0, 0, 0.2);
}
</style>
